<script lang="ts" setup>
  import { useAppStore } from '@/store';
  import { onBeforeMount, ref, onMounted } from 'vue';
  import { getApproveDetail, updateApprove } from '@/api/course';
  import { useRoute } from 'vue-router';
  import {
    CourseApproveItem,
    CourseFairway,
    CourseFood,
    CourseHotel,
    CourseSeason,
    CourseTransport,
    CourseTravel,
  } from '@/types/course';
  import { Modal } from '@arco-design/web-vue';
  import ProvinceJSON from '@/config/province.json';
  import CityJSON from '@/config/city.json';
  import { CourseStatus } from '@/config/course';
  import CupDetail from '@/views/courses/detail/cup-detail.vue';
  import PicAlbum from '@/components/pic-album/index.vue';
  import { api as viewerApi } from 'v-viewer';
  import InvitePass from './components/invite-pass.vue';
  import InviteRefuse from './components/invite-refuse.vue';

  const appStore = useAppStore();

  onBeforeMount(() => {
    appStore.updateSettings({
      menu: false,
    });
  });

  const courseDetail = ref<CourseApproveItem | null>(null);

  const loadingDetail = ref(false);
  const route = useRoute();

  const getData = async () => {
    try {
      loadingDetail.value = true;
      const res = await getApproveDetail(
        parseInt(route.query.id as string, 10)
      );
      courseDetail.value = res.data.data || {};

      if (courseDetail.value.pics) {
        courseDetail.value.picList = JSON.parse(
          `${courseDetail.value.pics}` || '[]'
        );
      }
      if (courseDetail.value.honor) {
        courseDetail.value.honorList = JSON.parse(
          courseDetail.value.honor
        ) as string[];
      }
      if (courseDetail.value.station) {
        courseDetail.value.stationList = JSON.parse(
          courseDetail.value.station
        ) as CourseTransport[];
      }
      if (courseDetail.value.airport) {
        courseDetail.value.airportList = JSON.parse(
          courseDetail.value.airport
        ) as CourseTransport[];
      }
      if (courseDetail.value.facility) {
        courseDetail.value.facilityList = JSON.parse(
          courseDetail.value.facility
        ) as string[];
      }
      if (courseDetail.value.food) {
        courseDetail.value.foodList = JSON.parse(
          courseDetail.value.food
        ) as CourseFood[];
      }
      if (courseDetail.value.hotel) {
        courseDetail.value.hotelList = JSON.parse(
          courseDetail.value.hotel
        ) as CourseHotel[];
      }
      if (courseDetail.value.recommendHotel) {
        courseDetail.value.recommendHotelList = JSON.parse(
          courseDetail.value.recommendHotel
        ) as CourseHotel[];
      }
      if (courseDetail.value.recommendScene) {
        courseDetail.value.recommendSceneList = JSON.parse(
          courseDetail.value.recommendScene
        ) as CourseTravel[];
      }
      if (courseDetail.value.season) {
        courseDetail.value.seasonList = JSON.parse(
          courseDetail.value.season
        ) as CourseSeason[];
      }
      if (courseDetail.value.courseCups) {
        courseDetail.value.courseCups.forEach((cup) => {
          if (cup.fieldStyle) {
            cup.fieldStyles = JSON.parse(cup.fieldStyle) as string[];
          }
          if (cup.fairway) {
            cup.fairwayList = JSON.parse(cup.fairway) as CourseFairway[];
          }
        });
      }
    } finally {
      loadingDetail.value = false;
    }
  };

  onMounted(() => {
    getData();
  });

  const passing = ref(false);
  const handlePassDone = (refresh: boolean) => {
    if (refresh) {
      getData();
    }
    passing.value = false;
  };

  const refusing = ref(false);
  const handleRefuseDone = (refresh: boolean) => {
    if (refresh) {
      getData();
    }
    refusing.value = false;
  };

  const handlePass = () => {
    // 预审核
    if (courseDetail.value?.status === 0 || courseDetail.value?.status === 2) {
      Modal.confirm({
        title: '提示',
        content: '确认通过审核？',
        async onBeforeOk() {
          await updateApprove({
            id: route.query.id,
            status: 1,
          });
          await getData();
        },
      });
      // 信息完善之后的审核, 需要填写经纬度
    } else if (courseDetail.value?.status === 3) {
      passing.value = true;
      // 信息修改
    } else if (courseDetail.value?.status === 6) {
      Modal.confirm({
        title: '提示',
        content: '确认通过审核？',
        async onBeforeOk() {
          await updateApprove({
            id: route.query.id,
            status: 4,
          });
          await getData();
        },
      });
    }
  };

  const handleRefuse = () => {
    refusing.value = true;
  };

  const previewImage = (url: string) => {
    viewerApi({
      images: [url],
      options: {
        navbar: false,
      },
    });
  };
</script>

<template>
  <div style="width: 1000px; margin: 20px auto">
    <a-card :bordered="false" :loading="loadingDetail">
      <template #title>
        <a-space>
          <span>球场审批</span>
          <a-tag>
            {{ CourseStatus[courseDetail?.status || 0] }}
          </a-tag>
        </a-space>
      </template>
      <template #extra>
        <a-space>
          <a-button
            v-if="
              courseDetail?.status === 0 ||
              courseDetail?.status === 2 ||
              courseDetail?.status === 3 ||
              courseDetail?.status === 6
            "
            type="primary"
            @click="handlePass()"
          >
            审核通过
          </a-button>
          <a-button
            v-if="
              courseDetail?.status === 0 ||
              courseDetail?.status === 3 ||
              courseDetail?.status === 6
            "
            status="danger"
            @click="handleRefuse()"
          >
            审核未通过
          </a-button>
        </a-space>
      </template>
      <a-row :gutter="[20, 20]">
        <a-col
          v-if="
            courseDetail?.status === 2 ||
            courseDetail?.status === 5 ||
            courseDetail?.status === 7
          "
        >
          拒绝原因：{{ courseDetail?.refuseReason }}
        </a-col>
        <a-col v-if="(courseDetail?.status || -1) <= 2">
          <div class="section-title">预审核信息</div>

          <div class="info-table">
            <div class="info-table-row">
              <div class="info-table-row-label">球场</div>
              <div class="info-table-row-value">{{ courseDetail?.name }}</div>
            </div>
            <div class="info-table-row">
              <div class="info-table-row-label">联系人</div>
              <div class="info-table-row-value">{{
                courseDetail?.contactName
              }}</div>
            </div>
            <div class="info-table-row">
              <div class="info-table-row-label">联系电话</div>
              <div class="info-table-row-value">{{
                courseDetail?.contactTel
              }}</div>
            </div>
            <div class="info-table-row">
              <div class="info-table-row-label">位置</div>
              <div class="info-table-row-value">{{
                courseDetail?.address
              }}</div>
            </div>
            <div class="info-table-row">
              <div class="info-table-row-label">LOGO</div>
              <div class="info-table-row-value">
                <img
                  :src="courseDetail?.logo"
                  style="max-width: 60px"
                  @click="previewImage(courseDetail?.logo as string)"
                />
              </div>
            </div>
            <div class="info-table-row">
              <div class="info-table-row-label">球场图片</div>
              <div class="info-table-row-value">
                <div style="width: 200px">
                  <PicAlbum :pics="courseDetail?.picList" />
                </div>
              </div>
            </div>
          </div>
        </a-col>

        <a-col v-if="(courseDetail?.status || -1) >= 3">
          <a-row :gutter="20">
            <a-col :span="18">
              <div v-if="courseDetail" class="course">
                <div class="course-title">
                  <img
                    :src="courseDetail.logo"
                    alt="logo"
                    @click="previewImage(courseDetail.logo as string)"
                  />
                  <div>{{ courseDetail.name }}</div>
                </div>

                <div class="course-basic">
                  <div>
                    {{
                      ProvinceJSON.find((i) => i.id === courseDetail?.province)
                        ?.name
                    }}
                    /
                    {{
                      (
                        CityJSON[
                          courseDetail.province as keyof typeof CityJSON
                        ] || []
                      ).find((i) => i.id === courseDetail?.city)?.name
                    }}
                  </div>
                  <div> {{ courseDetail.address }} </div>
                </div>

                <div style="margin: 10px 0 30px">
                  <table class="common-table" :cellpadding="0" :cellspacing="0">
                    <tr class="common-table-row">
                      <td
                        style="
                          width: 120px;
                          padding: 12px;
                          background: rgb(var(--gray-1));
                        "
                      >
                        练习场打位数
                      </td>
                      <td>{{ courseDetail.practiceCount }}</td>
                      <td
                        style="
                          width: 120px;
                          padding: 12px;
                          background: rgb(var(--gray-1));
                        "
                      >
                        真草打位
                      </td>
                      <td>{{ courseDetail.grass ? '是' : '否' }}</td>
                    </tr>
                    <tr class="common-table-row">
                      <td
                        style="
                          width: 120px;
                          padding: 12px;
                          background: rgb(var(--gray-1));
                        "
                      >
                        练习果岭
                      </td>
                      <td>{{ courseDetail.green ? '有' : '无' }}</td>
                      <td
                        style="
                          width: 120px;
                          padding: 12px;
                          background: rgb(var(--gray-1));
                        "
                      >
                        练习沙坑
                      </td>
                      <td>{{ courseDetail.sand ? '有' : '无' }}</td>
                    </tr>
                  </table>
                </div>

                <div v-if="courseDetail.courseCups" class="card">
                  <div class="card-title">场地信息</div>
                  <div>
                    <CupDetail
                      :course-detail="courseDetail"
                      :course-cups="courseDetail.courseCups"
                      :show-sync="false"
                    />
                  </div>
                </div>

                <div v-if="courseDetail.honorList" class="card">
                  <div class="card-title">球场荣誉</div>
                  <div>
                    <div
                      v-for="(honor, index) in courseDetail.honorList"
                      :Key="index"
                      style="line-height: 34px"
                    >
                      {{ index + 1 }}. {{ honor }}
                    </div>
                  </div>
                </div>

                <div class="card">
                  <div class="card-title">联系信息</div>
                  <div style="width: 60%">
                    <table
                      class="common-table"
                      :cellpadding="0"
                      :cellspacing="0"
                    >
                      <tr class="common-table-row">
                        <td
                          style="
                            width: 120px;
                            padding: 12px;
                            background: rgb(var(--gray-1));
                          "
                        >
                          联系人名称
                        </td>
                        <td>{{ courseDetail.contactName }}</td>
                      </tr>
                      <tr class="common-table-row">
                        <td
                          style="
                            width: 120px;
                            padding: 12px;
                            background: rgb(var(--gray-1));
                          "
                        >
                          联系人电话
                        </td>
                        <td>{{ courseDetail.contactTel }}</td>
                      </tr>
                      <tr class="common-table-row">
                        <td
                          style="
                            width: 120px;
                            padding: 12px;
                            background: rgb(var(--gray-1));
                          "
                        >
                          联系邮箱
                        </td>
                        <td>{{ courseDetail.contactEmail }}</td>
                      </tr>
                    </table>
                  </div>
                </div>

                <div class="card">
                  <div class="card-title">收款信息</div>
                  <div style="width: 60%">
                    <table
                      class="common-table"
                      :cellpadding="0"
                      :cellspacing="0"
                    >
                      <tr class="common-table-row">
                        <td
                          style="
                            width: 120px;
                            padding: 12px;
                            background: rgb(var(--gray-1));
                          "
                        >
                          账户名称
                        </td>
                        <td>{{ courseDetail.bankAccount }}</td>
                      </tr>
                      <tr class="common-table-row">
                        <td
                          style="
                            width: 120px;
                            padding: 12px;
                            background: rgb(var(--gray-1));
                          "
                        >
                          账户号码
                        </td>
                        <td>{{ courseDetail.bankNumber }}</td>
                      </tr>
                      <tr class="common-table-row">
                        <td
                          style="
                            width: 120px;
                            padding: 12px;
                            background: rgb(var(--gray-1));
                          "
                        >
                          开户银行
                        </td>
                        <td>{{ courseDetail.bankName }}</td>
                      </tr>
                    </table>
                  </div>
                </div>
              </div>

              <div class="card">
                <div class="card-title">营业执照</div>
                <div>
                  <img
                    :src="courseDetail?.license"
                    alt="license"
                    style="max-width: 100%"
                  />
                </div>
              </div>
            </a-col>
            <a-col :span="6">
              <div class="card">
                <div class="card-title">球场图片</div>
                <div>
                  <PicAlbum :pics="courseDetail?.picList" />
                </div>
              </div>

              <div
                v-if="courseDetail?.stationList || courseDetail?.airportList"
                class="card"
              >
                <div class="card-title">交通信息</div>
                <div class="card-content">
                  <div v-if="courseDetail?.stationList" class="transport">
                    <div class="transport-title">高铁/火车站</div>
                    <div class="transport-content">
                      <div
                        v-for="(station, index) in courseDetail.stationList"
                        :key="index"
                        class="transport-item"
                      >
                        <div class="transport-name">
                          {{ index + 1 }}. {{ station.name }}
                        </div>
                        <div class="transport-kilo">
                          距离球场：{{ station.kilometers }}km
                        </div>
                      </div>
                    </div>
                  </div>

                  <div v-if="courseDetail?.airportList" class="transport">
                    <div class="transport-title">机场</div>
                    <div class="transport-content">
                      <div
                        v-for="(station, index) in courseDetail.airportList"
                        :key="index"
                        class="transport-item"
                      >
                        <div class="transport-name">
                          {{ index + 1 }}. {{ station.name }}
                        </div>
                        <div class="transport-kilo">
                          距离球场：{{ station.kilometers }}km
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-if="courseDetail?.foodList" class="card">
                <div class="card-title">球场美食</div>
                <div class="card-content">
                  <div
                    v-for="(food, foodIndex) in courseDetail.foodList"
                    :key="foodIndex"
                    class="food"
                  >
                    <img
                      :src="food.pic"
                      class="food-pic"
                      alt="food"
                      style="cursor: pointer"
                      @click="previewImage(food.pic as string)"
                    />
                    <div class="food-name">{{ food.name }}</div>
                  </div>
                </div>
              </div>

              <div v-if="courseDetail?.hotelList" class="card">
                <div class="card-title">配套酒店</div>
                <div class="card-content">
                  <div
                    v-for="(hotel, hotelIndex) in courseDetail.hotelList"
                    :key="hotelIndex"
                    class="hotel"
                  >
                    <img
                      :src="hotel.pic"
                      class="hotel-pic"
                      alt="hotel"
                      style="cursor: pointer"
                      @click="previewImage(hotel.pic as string)"
                    />
                    <div class="hotel-info">
                      <div class="hotel-name">
                        {{ hotel.name }}
                      </div>
                      <div class="hotel-other">
                        房间数：{{ hotel.roomCount }}
                      </div>
                      <div class="hotel-other">
                        {{ hotel.address }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-if="courseDetail?.recommendHotelList" class="card">
                <div class="card-title">周边推荐酒店</div>
                <div class="card-content">
                  <div
                    v-for="(
                      hotel, hotelIndex
                    ) in courseDetail.recommendHotelList"
                    :key="hotelIndex"
                    class="hotel"
                  >
                    <img
                      :src="hotel.pic"
                      class="hotel-pic"
                      alt="hotel"
                      style="cursor: pointer"
                      @click="previewImage(hotel.pic as string)"
                    />
                    <div class="hotel-info">
                      <div class="hotel-name">
                        {{ hotel.name }}
                      </div>
                      <div class="hotel-other">
                        距离球场：{{ hotel.roomCount }}km
                      </div>
                      <div class="hotel-other">
                        {{ hotel.address }}
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div v-if="courseDetail?.recommendSceneList" class="card">
                <div class="card-title">周边风景旅游推荐</div>
                <div class="card-content">
                  <div
                    v-for="(
                      travel, travelIndex
                    ) in courseDetail.recommendSceneList"
                    :key="travelIndex"
                    class="travel"
                  >
                    <img
                      :src="travel.pic"
                      class="travel-pic"
                      alt="hotel"
                      style="cursor: pointer"
                      @click="previewImage(travel.pic as string)"
                    />
                    <div class="travel-info">
                      <div class="travel-name">
                        {{ travel.name }}
                      </div>
                      <div class="travel-other">
                        <a-typography-paragraph
                          :ellipsis="{
                            rows: 2,
                            showTooltip: true,
                            expandable: true,
                          }"
                        >
                          {{ travel.introduction }}
                        </a-typography-paragraph>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-card>

    <InvitePass
      v-if="passing"
      :approve-id="courseDetail?.id as number"
      @close="handlePassDone"
    />

    <InviteRefuse
      v-if="refusing"
      :approve-id="courseDetail?.id as number"
      :status="courseDetail?.status as number"
      @close="handleRefuseDone"
    />
  </div>
</template>

<style lang="less" scoped>
  .course {
    padding: 12px;
    background: #fff;
    border-radius: 4px;

    .card {
      padding: 0;
      margin-bottom: 30px;
      &:last-child {
        margin-bottom: 0;
      }
      &-title {
        font-size: 16px;
      }
    }

    &-title {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-weight: 600;
      img {
        margin-right: 10px;
        width: 40px;
        height: 40px;
      }
    }

    &-basic {
      margin: 20px 0 10px;
      & > div {
        line-height: 30px;
        color: var(--color-text-1);
      }
    }
  }

  .card {
    background: #fff;
    padding: 12px;
    border-radius: 4px;
    margin-bottom: 20px;
    &-title {
      font-weight: 600;
      margin-bottom: 10px;
    }
  }

  .transport {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(var(--gray-1));
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    &-title {
      font-size: 12px;
      color: var(--color-text-2);
      margin-bottom: 8px;
    }
    &-item {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    &-name {
      margin-bottom: 5px;
    }
    &-kilo {
      font-size: 12px;
      color: var(--color-text-3);
    }
  }

  .food {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    &-pic {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    &-name {
      flex: 1;
      min-width: 0;
      word-break: break-all;
    }
  }

  .hotel {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    &-info {
      flex: 1;
      min-width: 0;
      word-break: break-all;
    }
    &-pic {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    &-name {
      margin-bottom: 6px;
    }
    &-other {
      font-size: 12px;
      color: var(--color-text-3);
    }
  }

  .travel {
    display: flex;
    margin-bottom: 10px;
    &:last-child {
      margin-bottom: 0;
    }
    &-info {
      flex: 1;
      min-width: 0;
      word-break: break-all;
    }
    &-pic {
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }
    &-name {
      margin-bottom: 6px;
    }
    &:deep(.arco-typography) {
      font-size: 12px;
      color: var(--color-text-3);
      margin-bottom: 0;
    }
  }
  .info-table {
    margin: 12px 0;

    &-row {
      display: flex;
      align-items: center;
      margin: 0 0 12px;

      &-label {
        color: var(--color-text-1);
        width: 120px;
      }

      &-value {
        color: var(--color-text-1);
        font-weight: 500;
      }
    }
  }
</style>
